/**
 * 积分历史页面样式 - 现代蓝绿风格
 * 创建日期：2025-08-06
 * 更新日期：2025-01-20
 */

.points-history {
  padding: var(--spacing-xl);
  background: var(--background-light);
  min-height: 100vh;
  
  .points-summary {
    background: var(--background-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    border: 2rpx solid var(--border-light);
    
    .summary-item {
      text-align: center;
      flex: 1;
      
      .label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        display: block;
        margin-bottom: var(--spacing-sm);
      }
      
      .value {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        color: var(--text-primary);
      }
    }
    
    .export-button {
      width: 100%;
      height: 140rpx;
      line-height: 140rpx;
      background: var(--background-light);
      color: var(--text-secondary);
      font-size: var(--font-size-lg);
      border-radius: 70rpx;
      margin-top: var(--spacing-md);
      border: 2rpx solid var(--border-color);
      transition: all var(--transition-normal);
      
      &:active {
        opacity: 0.8;
      }
      
      &:hover {
        background: var(--primary-color);
        color: var(--text-white);
        border-color: var(--primary-color);
      }
      
      &[disabled] {
        opacity: 0.5;
      }
    }
  }
  
  .loading, .empty-state {
    text-align: center;
    padding: var(--spacing-3xl) 0;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    background: var(--background-card);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    border: 2rpx solid var(--border-light);
  }
  
  .transactions-list {
    height: calc(100vh - 360rpx);
    
    .date-group {
      margin-bottom: var(--spacing-xl);
      
      .date-header {
        padding: var(--spacing-sm) 0;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-weight: 500;
      }
      
      .transaction-item {
        background: var(--background-card);
        border-radius: var(--border-radius-lg);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: var(--shadow-card);
        border: 2rpx solid var(--border-light);
        transition: all var(--transition-normal);
        
        &:hover {
          transform: translateY(-2rpx);
          box-shadow: var(--shadow-md);
        }
        
        .transaction-info {
          flex: 1;
          
          .transaction-type {
            font-size: var(--font-size-lg);
            color: var(--text-primary);
            display: block;
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
          }
          
          .transaction-time {
            font-size: var(--font-size-sm);
            color: var(--text-muted);
            display: block;
            margin-bottom: var(--spacing-xs);
          }
          
          .transaction-desc {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            display: block;
            margin-top: var(--spacing-xs);
          }
        }
        
        .transaction-amount {
          text-align: right;
          
          .amount {
            font-size: var(--font-size-xl);
            font-weight: 700;
            display: block;
            margin-bottom: var(--spacing-xs);
            
            &.positive {
              color: var(--success-color);
            }
            
            &.negative {
              color: var(--error-color);
            }
          }
          
          .status {
            font-size: var(--font-size-xs);
            padding: 4rpx var(--spacing-sm);
            border-radius: var(--border-radius);
            margin-top: var(--spacing-xs);
            display: inline-block;
            
            &.completed {
              background: rgba(39, 174, 96, 0.1);
              color: var(--success-color);
            }
            
            &.pending {
              background: rgba(243, 156, 18, 0.1);
              color: var(--warning-color);
            }
            
            &.failed {
              background: rgba(231, 76, 60, 0.1);
              color: var(--error-color);
            }
          }
        }
      }
    }
  }
  
  .floating-action {
    position: fixed;
    bottom: 60rpx;
    right: var(--spacing-xl);
    width: 120rpx;
    height: 120rpx;
    background: var(--primary-gradient);
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    
    &:hover {
      transform: scale(1.1);
    }
    
    .icon {
      font-size: var(--font-size-xl);
    }
  }
}

// 响应式设计
@media (max-width: 640rpx) {
  .points-history {
    padding: var(--spacing-lg);
    
    .points-summary {
      padding: var(--spacing-lg);
    }
    
    .transaction-item {
      padding: var(--spacing-lg);
    }
  }
} 